<!DOCTYPE html>
<html lang="pt-br">
<head>
	<title>FlowCss - Buttons</title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes"> 
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<meta name="description" content="redefining standard browser style standards" />
    <meta name="keywords" content="reset css, reset styles of browser, css reset"/>
	<meta name="robots" content="index, follow">
	<meta name="author" content="AlexDK">
    <link rel="stylesheet" href="../../../css/flowcss.css">
</head>
<body>
  <section class="container py-30">
    <h1 class="mb-30 text-left">Tons de azul</h1>
    <div class="mb-10 p-10 text-center color-white bold-600 bg-blue-1">blue-1</div>
    <div class="mb-10 p-10 text-center color-white bold-600 bg-blue-2">blue-2</div>
    <div class="mb-10 p-10 text-center color-white bold-600 bg-blue-3">blue-3</div>
    <div class="mb-10 p-10 text-center color-white bold-600 bg-blue-4">blue-4</div>
    <div class="mb-10 p-10 text-center color-white bold-600 bg-blue-5">blue-5</div>
    <div class="mb-10 p-10 text-center color-white bold-600 bg-blue-6">blue-6</div>
    <div class="mb-10 p-10 text-center color-white bold-600 bg-blue-7">blue-7</div>

    <h1 class="my-30 text-left">Tons de vermelhos</h1>
    <div class="mb-10 p-10 text-center color-white bold-600 bg-red-1">red-1</div>
    <div class="mb-10 p-10 text-center color-white bold-600 bg-red-2">red-2</div>
    <div class="mb-10 p-10 text-center color-white bold-600 bg-red-3">red-3</div>
    <div class="mb-10 p-10 text-center color-white bold-600 bg-red-4">red-4</div>
    <div class="mb-10 p-10 text-center color-white bold-600 bg-red-5">red-5</div>
    <div class="mb-10 p-10 text-center color-white bold-600 bg-red-6">red-6</div>
    <div class="mb-10 p-10 text-center color-white bold-600 bg-red-7">red-7</div>
    
    <h1 class="my-30 text-left">Tons de verde</h1>
    <div class="mb-10 p-10 text-center color-white bold-600 bg-green-1">green-1</div>
    <div class="mb-10 p-10 text-center color-white bold-600 bg-green-2">green-2</div>
    <div class="mb-10 p-10 text-center color-white bold-600 bg-green-3">green-3</div>
    <div class="mb-10 p-10 text-center color-white bold-600 bg-green-4">green-4</div>
    <div class="mb-10 p-10 text-center color-white bold-600 bg-green-5">green-5</div>
    <div class="mb-10 p-10 text-center color-white bold-600 bg-green-6">green-6</div>
    <div class="mb-10 p-10 text-center color-white bold-600 bg-green-7">green-7</div>

    <h1 class="my-30 text-left">Tons de violeta</h1>
    <div class="mb-10 p-10 text-center color-white bold-600 bg-violet-1">violet-1</div>
    <div class="mb-10 p-10 text-center color-white bold-600 bg-violet-2">violet-2</div>
    <div class="mb-10 p-10 text-center color-white bold-600 bg-violet-3">violet-3</div>
    <div class="mb-10 p-10 text-center color-white bold-600 bg-violet-4">violet-4</div>
    <div class="mb-10 p-10 text-center color-white bold-600 bg-violet-5">violet-5</div>
    <div class="mb-10 p-10 text-center color-white bold-600 bg-violet-6">violet-6</div>
    <div class="mb-10 p-10 text-center color-white bold-600 bg-violet-7">violet-7</div>

    <h1 class="my-30 text-left">Tons de ciano</h1>
    <div class="mb-10 p-10 text-center color-white bold-600 bg-cyan-1">cyan-1</div>
    <div class="mb-10 p-10 text-center color-white bold-600 bg-cyan-2">cyan-2</div>
    <div class="mb-10 p-10 text-center color-white bold-600 bg-cyan-3">cyan-3</div>
    <div class="mb-10 p-10 text-center color-white bold-600 bg-cyan-4">cyan-4</div>
    <div class="mb-10 p-10 text-center color-white bold-600 bg-cyan-5">cyan-5</div>
    <div class="mb-10 p-10 text-center color-white bold-600 bg-cyan-6">cyan-6</div>
    <div class="mb-10 p-10 text-center color-white bold-600 bg-cyan-7">cyan-7</div>
  
    <h1 class="my-30 text-left">Tons de amarelo</h1>
    <div class="mb-10 p-10 text-center color-white bold-600 bg-yellow-1">yellow-1</div>
    <div class="mb-10 p-10 text-center color-white bold-600 bg-yellow-2">yellow-2</div>
    <div class="mb-10 p-10 text-center color-white bold-600 bg-yellow-3">yellow-3</div>
    <div class="mb-10 p-10 text-center color-white bold-600 bg-yellow-4">yellow-4</div>
    <div class="mb-10 p-10 text-center color-white bold-600 bg-yellow-5">yellow-5</div>
    <div class="mb-10 p-10 text-center color-white bold-600 bg-yellow-6">yellow-6</div>
    <div class="mb-10 p-10 text-center color-white bold-600 bg-yellow-7">yellow-7</div>

    <h1 class="my-30 text-left">Tons de indigo</h1>
    <div class="mb-10 p-10 text-center color-white bold-600 bg-indigo-1">indigo-1</div>
    <div class="mb-10 p-10 text-center color-white bold-600 bg-indigo-2">indigo-2</div>
    <div class="mb-10 p-10 text-center color-white bold-600 bg-indigo-3">indigo-3</div>
    <div class="mb-10 p-10 text-center color-white bold-600 bg-indigo-4">indigo-4</div>
    <div class="mb-10 p-10 text-center color-white bold-600 bg-indigo-5">indigo-5</div>
    <div class="mb-10 p-10 text-center color-white bold-600 bg-indigo-6">indigo-6</div>
    <div class="mb-10 p-10 text-center color-white bold-600 bg-indigo-7">indigo-7</div>
  
    <h1 class="my-30 text-left">Tons de preto</h1>
    <div class="mb-10 p-10 text-center color-white bold-600 bg-dark-1">dark-1</div>
    <div class="mb-10 p-10 text-center color-white bold-600 bg-dark-2">dark-2</div>
    <div class="mb-10 p-10 text-center color-white bold-600 bg-dark-3">dark-3</div>
    <div class="mb-10 p-10 text-center color-white bold-600 bg-dark-4">dark-4</div>
    <div class="mb-10 p-10 text-center color-white bold-600 bg-dark-5">dark-5</div>
    <div class="mb-10 p-10 text-center color-white bold-600 bg-dark-6">dark-6</div>
    <div class="mb-10 p-10 text-center color-white bold-600 bg-dark-7">dark-7</div>

    <h1 class="my-30 text-left">Tons de rosa</h1>
    <div class="mb-10 p-10 text-center color-white bold-600 bg-pink-1">pink-1</div>
    <div class="mb-10 p-10 text-center color-white bold-600 bg-pink-2">pink-2</div>
    <div class="mb-10 p-10 text-center color-white bold-600 bg-pink-3">pink-3</div>
    <div class="mb-10 p-10 text-center color-white bold-600 bg-pink-4">pink-4</div>
    <div class="mb-10 p-10 text-center color-white bold-600 bg-pink-5">pink-5</div>
    <div class="mb-10 p-10 text-center color-white bold-600 bg-pink-6">pink-6</div>
    <div class="mb-10 p-10 text-center color-white bold-600 bg-pink-7">pink-7</div>

    <h1 class="my-30 text-left">Tons de laranja</h1>
    <div class="mb-10 p-10 text-center color-white bold-600 bg-orange-1">orange-1</div>
    <div class="mb-10 p-10 text-center color-white bold-600 bg-orange-2">orange-2</div>
    <div class="mb-10 p-10 text-center color-white bold-600 bg-orange-3">orange-3</div>
    <div class="mb-10 p-10 text-center color-white bold-600 bg-orange-4">orange-4</div>
    <div class="mb-10 p-10 text-center color-white bold-600 bg-orange-5">orange-5</div>
    <div class="mb-10 p-10 text-center color-white bold-600 bg-orange-6">orange-6</div>
    <div class="mb-10 p-10 text-center color-white bold-600 bg-orange-7">orange-7</div>
    
    <h1 class="my-30 text-left">Cores do tema</h1>
    <div class="mb-10 p-10 text-center color-white bold-600 bg-primary">primary</div>
    <div class="mb-10 p-10 text-center color-white bold-600 bg-secondary">secondary</div>
    <div class="mb-10 p-10 text-center color-white bold-600 bg-danger">danger</div>
    <div class="mb-10 p-10 text-center color-white bold-600 bg-warning">warning</div>
    <div class="mb-10 p-10 text-center color-white bold-600 bg-info">info</div>
    <div class="mb-10 p-10 text-center color-white bold-600 bg-success">success</div>
    <div class="mb-10 p-10 text-center color-white bold-600 bg-dark">dark</div>


    <h1 class="my-30 text-left">Cores gradients</h1>
    <div class="mb-10 p-10 text-center color-white bold-600 gradient-db">gradient-db</div>
    <div class="mb-10 p-10 text-center color-white bold-600 gradient-oy">gradient-oy</div>
    <div class="mb-10 p-10 text-center color-white bold-600 gradient-vp">gradient-vp</div>
    <div class="mb-10 p-10 text-center color-white bold-600 gradient-bi">gradient-bi</div>
    <div class="mb-10 p-10 text-center color-white bold-600 gradient-rb">gradient-rb</div>
    <div class="mb-10 p-10 text-center color-white bold-600 gradient-red">gradient-red</div>
    <div class="mb-10 p-10 text-center color-white bold-600 gradient-violet">gradient-violet</div>
    <div class="mb-10 p-10 text-center color-white bold-600 gradient-dark">gradient-dark</div>
    <div class="mb-10 p-10 text-center color-white bold-600 gradient-light">gradient-light</div>
  </section>
</body>
</html>
